<template>
  <view class="toast-container" :style="positionStyle" v-if="visible">
    <view :class="['toast-content', type]">
      <text class="toast-text">{{ message }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  // 显示位置 {top: '100rpx', left: '100rpx'} 或者 {bottom: '100rpx', right: '100rpx'}
  position: {
    type: Object,
    default: () => ({
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)'
    })
  }
})

const visible = ref(false)
const message = ref('')
const type = ref('success') // success 或 error

// 计算位置样式
const positionStyle = computed(() => {
  const style = {
    position: 'fixed',
    ...props.position
  }
  return Object.entries(style).map(([key, value]) => `${key}:${value}`).join(';')
})

// 显示toast的方法
const showToast = (options) => {
  const { text, duration = 2000, type: toastType = 'success' } = options
  
  message.value = text
  type.value = toastType
  visible.value = true
  
  setTimeout(() => {
    visible.value = false
  }, duration)
}

// 暴露方法给外部使用
defineExpose({
  showToast
})
</script>

<style scoped>
.toast-container {
  z-index: 9999;
  height: 124rpx;
}

.toast-content {
  padding: 40rpx 68rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success {
  background: #DEDEDE;
}

.error {
  background: #DEDEDE;
}

.toast-text {
	font-family: PingFangSC-Medium;
	font-size: 28rpx;
	color: #000000;
	letter-spacing: 0;
	font-weight: 500;
}
</style> 